<template>
  <div>
    <el-popover trigger="hover" placement="bottom-start">
      <el-button type="text" size="small" @click="checkOrder">查看订单</el-button><br>
      <el-button type="text" size="small" @click="logout()">退出登录</el-button>
      <div slot="reference">
        <el-avatar size="small"></el-avatar>
        <el-button type="text">{{name}}</el-button>
      </div>
    </el-popover>

    <el-drawer title="您的订单" :visible.sync="orderDrawer" direction="rtl" size="30%">
      <el-table :data="orderData">
        <el-table-column prop="order_id" label="订单号" width="100"></el-table-column>
        <el-table-column prop="phone_type" label="商品" width="175"></el-table-column>
        <el-table-column prop="order_state" label="订单状态" width="150"></el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Avatar",
  data() {
    return {
      name: '',
      orderDrawer: false,
      orderData: [],
    }
  },
  methods: {
    logout() {
      this.$store.commit('logout');
      this.$emit('setLoginState');
      this.$message.success('已退出登录');
      this.name = '';
      this.id = '';
    },
    checkOrder() {
      this.orderDrawer = true;
      var id = this.$store.state.id;
      //实现从数据库获取订单信息
      axios.post("api/order/check",{id: id}).then((res)=>{
        console.log(res.data);
        this.orderData = res.data;
      })
    },
    setName() {
      this.name = this.$store.state.name;
    }
  },
}
</script>

<style scoped>

</style>
